<script setup lang="ts">
import { ESIcon, Message } from 'earthsdk-ui'
const iconList = ['unchecked', 'indeterminate', 'checked', 'unshow', 'show']
//复制
const copyName = (text: string) => {
    navigator.clipboard.writeText(text)
        .then(function () {
            Message.success('复制成功');
        }, function () {
            Message.error('复制失败');
        });
}
</script>
<template>
    <ul class="es-icon-list">
        <li v-for="item in iconList" @click="copyName(item)" class="es-icon-item">
            <span>
                <es-tooltip :tooltip="item" position="top">
                    <ESIcon :name="item" color="#666" />
                </es-tooltip>
            </span>
            <span class="es-copy-name">{{ item }}</span>
        </li>
    </ul>
</template>
<style scoped lang="css">
.es-icon-list {
    width: 100%;
    color: #5e6d82;
    list-style: none;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.es-icon-item {
    text-align: center;
    width: 120px;
    height: 100px;
    color: #666;
    font-size: 13px;
    border: 1px solid #ececec6b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 0 -1px -1px;
}

.es-icon-item:hover {
    border: 1px solid #A8B1EA;
    transition: all 0.3s ease-in-out;
}

.es-copy-name {
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
